<template>
  <div>
    <!-- 顶部导航 -->
    <div style="height: 60px; background-color: #333; display: flex; align-items: center; border-bottom: 1px solid #444; color: #fff;">
      <div style="flex: 1">
        <div style="padding-left: 20px; display: flex; align-items: center">
          <img src="@/assets/imgs/logo.png" alt="" style="width: 30px; border-radius: 50%">
          <div style="font-weight: bold; font-size: 20px; margin-left: 10px; color: #ffdd44;">聚汇星管理系统</div>
        </div>
      </div>
      <div style="width: fit-content; padding-right: 10px; display: flex; align-items: center;">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="" style="width: 40px; height: 40px; border-radius: 50%;">
        <span style="margin-left: 5px">管理员</span>
      </div>
    </div>

    <!-- 左侧菜单栏 -->
    <div style="display: flex">
      <div style="width: 200px; border-right: 1px solid #444; min-height: calc(100vh - 60px); background-color: #222; color: #ccc;">
        <el-menu
            router
            style="border: none; background-color: transparent; color: #ccc;"
            :default-active="$route.path"
            :default-openeds="['/home', 'info', 'user']"
        >
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-sub-menu index="info">
            <template #title>
              <el-icon><DataAnalysis /></el-icon>
              <span>信息管理</span>
            </template>
            <el-menu-item index="/slideshow">
              <el-icon><Picture  /></el-icon>
              <span>轮播图管理</span>
            </el-menu-item>
            <el-menu-item index="/category">
              <el-icon><DocumentRemove /></el-icon>
              <span>分类管理</span>
            </el-menu-item>
            <el-menu-item index="/goods">
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="/supplier">
              <el-icon><User /></el-icon>
              <span>供货商管理</span>
            </el-menu-item>
            <el-menu-item index="/stockorders">
              <el-icon><ShoppingTrolley /></el-icon>
              <span>进货管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="user">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/member">
              <el-icon><UserFilled /></el-icon>
              <span>用户信息</span>
            </el-menu-item>
            <el-menu-item index="/admin">
              <el-icon><UserFilled /></el-icon>
              <span>管理员信息</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item index="/person">
            <el-icon><User /></el-icon>
            <span>个人资料</span>
          </el-menu-item>
          <el-menu-item index="/password">
            <el-icon><Lock /></el-icon>
            <span>修改密码</span>
          </el-menu-item>
          <el-menu-item index="login" @click="logout">
            <el-icon><SwitchButton /></el-icon>
            <span>退出系统</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 右侧内容区域 -->
      <div style="flex: 1; background-color: #fff; padding: 20px;">
        <router-view />
      </div>
    </div>
  </div>
</template>


<script setup>
import { useRoute } from 'vue-router'
import {User, UserFilled} from "@element-plus/icons-vue";
import {reactive} from "vue";
const $route = useRoute()
console.log($route.path)

const data = reactive({
  user: JSON.parse(localStorage.getItem('user') || '{}')
})
const logout = () => {
  localStorage.removeItem('supermarket-user')
}
</script>

<style scoped>
/* 默认菜单文字颜色改为更白 */
.el-menu {
  color: #3a3939 !important;
}

/* 子菜单标题默认状态文字更白 */
:deep(.el-sub-menu__title) {
  color: #f0f0f0 !important;
}

/* 子菜单激活和悬停状态 */
:deep(.el-sub-menu__title.is-active),
:deep(.el-sub-menu__title:hover) {
  color: #ffdd44 !important;
}

/* 菜单项的文字颜色和悬停效果 */
.el-menu-item {
  color: #f0f0f0 !important;
}
.el-menu-item:hover {
  color: #ffdd44 !important;
}

/* 激活的菜单项背景和文字 */
.el-menu-item.is-active {
  background-color: #444 !important;
  color: #ffdd44 !important;
}

/* 提高对比的分隔线 */
.el-menu-item::after {
  border-color: #555 !important;
}

/* 子菜单背景颜色与父菜单一致 */
:deep(.el-sub-menu__title) {
  background-color: #222 !important; /* 与父菜单背景一致 */
  color: #f0f0f0 !important;        /* 与父菜单文字颜色一致 */
}

/* 子菜单项的背景颜色与文字颜色 */
:deep(.el-menu-item) {
  background-color: #222 !important; /* 与父菜单背景一致 */
  color: #f0f0f0 !important;         /* 与父菜单文字颜色一致 */
}

/* 子菜单悬停效果 */
:deep(.el-menu-item:hover) {
  background-color: #333 !important; /* 悬停背景稍微加深 */
  color: #ffdd44 !important;         /* 悬停时文字颜色变成高亮 */
}

/* 激活的子菜单项样式 */
:deep(.el-menu-item.is-active) {
  background-color: #444 !important; /* 激活背景稍微加深 */
  color: #ffdd44 !important;         /* 激活文字变成高亮 */
}

/* 子菜单展开区域背景颜色与父菜单保持一致 */
:deep(.el-menu--popup) {
  background-color: #222 !important; /* 与父菜单一致 */
  color: #f0f0f0 !important;         /* 与父菜单一致 */
}
</style>
